<template>
  <div>
    <!-- 这是首页主页
      静态组件 （ 分类组件）
      商铺组件
      容器组件（是其他组件，非home私有） -->
    <div class="wrapper">
      <StaticPart />
      <NearBy :goodsData="goodsData" @go="handler" />
    </div>
  </div>
</template>

<!-- <script>
export default {
  // 给组件定义名字
  name: "home",
};
</script> -->

<script setup>
import { Toast } from "vant";
import StaticPart from "./components/StaticPart.vue";
import NearBy from "./components/NearBy.vue";
import Docker from "../../components/Docker.vue";
import { ref, reactive } from "vue";
import { get } from "../../utils/request";
let params = reactive({ project_id: 248, page: 1, limit: 10 });
let goodsData = ref([]);
// console.log("home组件渲染");

// 请求商品列表
const getDatas = async () => {
  Toast.loading({
    message: "加载中...",
    forbidClick: true,
  });
  let res = await get("/goods", params);
  goodsData.value = goodsData.value.concat(res.result.rows);
  console.log(res);
};
getDatas();

const handler = () => {
  // 请求更多的数据
  // 触底一次，触发一次handler  page++ =>发请求
  params.page++;
  getDatas();
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 0 0.1rem 0.1rem 0.1rem;
  // background-color: skyblue;
  margin-bottom: 49px;

  background-color: #f6f6f6;
}
</style>
